<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/js/Grid/css/grid.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/Grid/js/grid.js"></script>
    <script>
        window.addEventListener("message", evt => {
            var data = evt.data;
            schema = data.schema;
            table = data.table;
            loadGrid();
        });
    </script>
</head>

<body>
    <div id="grid"></div>
    <script>
        var schema, table;
        $(function () {
            initColumnsGrid();
        });
        var data;
        var gridColumns;
        function initColumnsGrid() {
            gridColumns = new Grid("grid", {
                isFixHead: true,
                sizeColumn: true,
                height: 100,
                isPage: false,
                colWidths: [
                    30, 200, 80, 200, 100, 80, 80
                ],
                headArr: [
                    [
                        { text: "序号" },
                        { text: "名称" },
                        { text: "类型" },
                        { text: "关联列" },
                        { text: "?可空" },
                        { text: "?唯一" },
                        { text: "其他" }
                    ]
                ],
                columnArr: [
                    { type: "index" },
                    { type: "lab", name: "name", cutLen: 20, title: "name" },
                    { type: "lab", name: "indexString" },
                    { type: "lab", name: "columnNames" },
                    {
                        type: "lab", formatter: function (col, tdconf) {
                            if (col.isNullAble) {
                                return  '是'
                            } else {
                                return `<font color='red'>否</font>`;
                            }
                        }
                    },
                    {
                        type: "lab", formatter: function (col, tdconf) {
                            if (col.isUnique) {
                                return "是";
                            } else {
                                return `<font color='red'>否</font>`;
                            }
                        }
                    },
                    { type: "lab", name: "otherinfo" }
                ],
                onQuery: function (pageIndex, pageSize, orders) {
                    if (orders.length > 0) {
                        initColumns(orders);
                    }
                }
            });
            gridColumns.init({ data: [] });
        }
        function initColumns(orders) {
            var columns = data.indexes.map(col => {
                //索引类型
                col.indexString = col.indexType;
                //其他信息
                if (col.name=='PRIMARY') {
                    col.otherinfo = "主键";
                }
                return col;
            });
            gridColumns.init({ data: columns });
            var height = document.body.clientHeight - 10 - 35;
            gridColumns.setHeight(height + "px");
        }
        function loadGrid() {
            showLoading();
            $.post("/api/mysqlmanage/GetTableDetail", { schema, table }, function (res) {
                data = res.data;
                initColumns();
            }).always(hideLoading);
        }
    </script>
</body>

</html>